<template>
    <div class="container">
      
            <el-button type="primary" @click="add">添加</el-button>
            <div class="m-table">
            <el-table
                :data="tableData"
                border
                stripe
                style="width：100%"
                :header-cell-style="{background:'#f2f2f2',color:'#696969'}">
                <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center">
                </el-table-column>
                <el-table-column
                prop="type"
                label="分类"
                width="100"
                >
                </el-table-column>
                <el-table-column
                prop="title"
                label="题目"
                width="180">
                </el-table-column>
                <el-table-column
                prop="author"
                label="发布者"
                width="180">
                </el-table-column>
                <el-table-column
                prop="imgURL"
                label="图片路径"
                sortable
                width="180">
                <template slot-scope="scope">
                    <img v-if="scope.row.imgURL" :src="scope.row.imgURL" alt="" style="width: 100px;height: 100px">
                    <img v-if="!scope.row.imgURL" src="https://picture-1257052444.cos.ap-beijing.myqcloud.com/beijing.png" style="width: 50px;height: 50px">
                </template>
            </el-table-column>
                <el-table-column
                prop="pdfURL"
                label="pdf地址"
                width="200">
                </el-table-column>
                
                <el-table-column
                prop="actions"
                label="操作">
                <template slot-scope="scope">
                <el-button size="mini" @click.native.prevent="edit(scope.$index, scope.row)">预览</el-button>
                <el-button type="danger" size="mini" @click.native.prevent="del(scope.row,scope.row)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            </div>
    </div>
</template>

<script>
export default {
    name:'infoshow',
    data(){
        return {
           tableData:[],
        }
    },
    mounted(){
        this.list()
        
    },
    methods:{
        list() {
            this.$axios.get('/api/data/').then(res => {
                this.tableData = res.data
            })
        },
        add() {
            this.$router.push("/UEditor");
        },
        edit(index, row) {
            this.$router.push({
                path: "content",
                query: {
                id:  row._id
                }
            })
        },
        del(index, row) {
                this.$confirm("是否要删除?", "提示", {
                confirmButtonText: "删除",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
            this.$axios.delete('/api/data/del/'+row._id).then(res => {
                this.list()
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
            })
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },

    }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.m-table{
    margin-top: 20px;
}
.m-body {
  margin: 15px 20px;
  padding: 30px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
</style>